// 当网页加载完成后再执行代码
window.onload = function () {
    var username = document.querySelector('#username');
    var phone = document.querySelector('#phone');
    var pwd = document.querySelector('#pwd');
    var showPwd = document.querySelector('#show_pwd');
    // 密码框的操作
    showPwd.onclick = function () {
        if (pwd.type == 'text') { // 是文本框
            pwd.type = 'password';
            showPwd.className = 'hide-pwd'; // 如果是密码框则增加 样式
        } else {
            pwd.type = 'text';
            showPwd.className = '';
        }
    };
    // 用户名的判断
    username.onblur = function () {
        var tip = this.parentNode.querySelector('.tip');
        tip.style.display = 'none'
        var error = this.parentNode.querySelector('.error');//找到对应的错误提示div
        if (this.value != '' && (this.value.length < 6 || this.value.length > 14)) {
            // 错误
            error.style.display = 'block';
            this.style.borderColor = '#f00';
        }else{
            this.style.borderColor = '#ccc';
        }
    }
    username.onfocus = function(){
        // 提示消息
        var tip = this.parentNode.querySelector('.tip');
        tip.style.display = 'block';

        var error = this.parentNode.querySelector('.error');
        error.style.display = 'none';
        this.style.borderColor = '#1947FF';
    }
    // 手机的判断
    phone.onblur = function () {
        var error = this.parentNode.querySelector('.error');//找到对应的错误提示div
        if (this.value != '' && /^1[3-9]\d{9}$/.test(this.value) == false) {
            // 错误
            error.style.display = 'block';
            this.style.borderColor = '#f00';
        }else{
            this.style.borderColor = '#ccc';
        }
    };
    phone.onfocus = function(){
        var error = this.parentNode.querySelector('.error');
        error.style.display = 'none';
        this.style.borderColor = '#1947FF';
    };
    // 密码的判断
    pwd.onblur = function () {
        var tip = this.parentNode.querySelector('.tip');
        tip.style.display = 'none'
        var error = this.parentNode.querySelector('.error');//找到对应的错误提示div
        if (this.value != '' && (this.value.length < 8 || this.value.length > 14)) {
            // 错误
            error.style.display = 'block';
            this.style.borderColor = '#f00';
        }else{
            this.style.borderColor = '#ccc';
        }
    };
    pwd.onfocus = function(){
        // 提示消息
        var tip = this.parentNode.querySelector('.tip');
        tip.style.display = 'block';

        var error = this.parentNode.querySelector('.error');
        error.style.display = 'none';
        this.style.borderColor = '#1947FF';
    };

}